<template>
	<view class="content">
		<view class="box">
			<view class="item" @click="zrshow()">
				<view class="title">转让方式：</view>
				<view>
					<text class="txt" v-if="zrfangshi_value == ''">未选择</text>
					<text class="txt"v-else>{{zrfangshi_value}}</text>
					<image class="more" src="../../static/images/ic_arrow_right.png"></image>
				</view>
			</view>
			<view class="item" @click="didianshow()">
				<view class="title">地点：</view>
				<view>
					<text class="txt" v-if="didian_value == ''">未选择</text>
					<text class="txt"v-else>{{didian_value}}</text>
					<image class="more" src="../../static/images/ic_arrow_right.png"></image>
				</view>
			</view>
			<view class="item" @click="xinjiushow()">
				<view class="title">新旧程度：</view>
				<view>
					<text class="txt" v-if="xinjiu_value == ''">未选择</text>
					<text class="txt"v-else>{{xinjiu_value}}</text>
					<image class="more" src="../../static/images/ic_arrow_right.png"></image>
				</view>
			</view>
			<view class="item">
				<view class="title">售价：</view>
				<view class="jiage">
					<input class="input" type="digit" maxlength="5" v-model="jiage"/>
					<text class="txt">元</text>
				</view>
			</view>
			<view class="item">
				<view class="title">数量：</view>
				<view class="shuliang">
					<input class="input" type="number" maxlength="5" v-model="shuliang"/>
					<text class="txt">本</text>
				</view>
			</view>
			<view class="item">
				<view class="title">备注：</view>
				<view class="textarea">
					<textarea v-model="beizhu" class="txt" placeholder-style="font-size:14px;" auto-height="true" maxlength="150" placeholder="150字以内"/>
				</view>
			</view>
			<button class="btn" @click="savezhuanrang()">确定</button>
		</view>
		
		<!-- 转让方式 -->
		<view :class="{'zrfangshi': zrState}" @click="zrhidden" v-if="zrState">
			<view class="share-box">
		    <view class="share-item">
				<picker-view class="picker-view" :indicator-style="indicatorStyle" :value="value" @change="zrChange">
					<picker-view-column>
						<view class="item" v-for="(item,index) in zrfangshis" :key="index">{{item}}</view>
					</picker-view-column>
				</picker-view>
		    </view>			
			<view class="footer">
				<text class="txt" @click.stop="zrhidden">取消</text>
				<text class="txt" @click.stop="zrxuanze">确定</text>
			</view>
			</view>
		</view>
		
		<!-- 地点 -->
		<view :class="{'didian': didianState}" @click="didianhidden" v-if="didianState">
			<view class="share-box">
		    <view class="share-item">
				<picker-view class="picker-view" :indicator-style="indicatorStyle" :value="value" @change="didianChange">
					<picker-view-column>
						<view class="item" v-for="(item,index) in didians" :key="index">{{item}}</view>
					</picker-view-column>
				</picker-view>
		    </view>			
			<view class="footer">
				<text class="txt" @click.stop="didianhidden">取消</text>
				<text class="txt" @click.stop="didianxuanze">确定</text>
			</view>
			</view>
		</view>
		
		<!-- 新旧程度 -->
		<view :class="{'xinjiu': xinjiuState}" @click="xinjiuhidden" v-if="xinjiuState">
			<view class="share-box">
		    <view class="share-item">
				<picker-view class="picker-view" :indicator-style="indicatorStyle" :value="value" @change="xinjiuChange">
					<picker-view-column>
						<view class="item" v-for="(item,index) in xinjius" :key="index">{{item}}</view>
					</picker-view-column>
				</picker-view>
		    </view>			
			<view class="footer">
				<text class="txt" @click.stop="xinjiuhidden">取消</text>
				<text class="txt" @click.stop="xinjiuxuanze">确定</text>
			</view>
			</view>
		</view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				uid: '',
				usernaem: '',
				bookid: '',
				bookname: '',
				zuozhe: '',
				isbn: '',
				
				jiage: 0,
				shuliang: 1,
				beizhu: '',
				
				indicatorStyle: `height: 50px;`,
				value: [],
				
				zrfangshis: ['借阅', '交换', '出售', '赠送'],
				zrfangshi: '',
				zrfangshi_value: '',
								
				didians: ['当地(同城)', '当地或异地'],
				didian: '',
				didian_value: '',
				
				xinjius: ['全新', '9成新', '8成新', '7成新', '6成新', '5成新', '较旧'],
				xinjiu: '',
				xinjiu_value: '',
				
				zrState: false, // 转让
				didianState: false, // 地点
				xinjiuState: false, // 新旧
			}
		},
		onLoad(option) {
			var userinfo = uni.getStorageSync('userinfo');
			this.uid = userinfo.uid;
			this.username = userinfo.user_name;
			this.bookid = option.bookid;	
			this.bookname = option.bookname;
			this.zuozhe = option.zuozhe;
			this.isbn = option.isbn;
			// 标题显示书籍名字
			uni.setNavigationBarTitle({
			    title: '转让：' + option.bookname
			});
		},
		methods: {
			// 转让方式显示
			zrshow() {
			    this.zrState = true;
			},
			// 转让方式隐藏
			zrhidden() {
			    this.zrState = false;
			},
			// 选择转让方式
			zrChange: function (e) {
				const val = e.detail.value;
				this.zrfangshi = this.zrfangshis[val[0]];
			},
			// 转让选择确定
			zrxuanze() {				
				this.zrfangshi_value = this.zrfangshi;
				if(this.zrfangshi_value == '')
				{					
					this.zrfangshi_value = '借阅';
					this.zrfangshi = "借阅";
				}
				this.zrState = false;
			},
			
			// 地点显示
			didianshow() {
			    this.didianState = true;
			},
			// 地点隐藏
			didianhidden() {
			    this.didianState = false;
			},
			// 选择地点
			didianChange: function (e) {
				const val = e.detail.value;
				this.didian = this.didians[val[0]];
			},
			// 地点选择确定
			didianxuanze() {				
				this.didian_value = this.didian;
				if(this.didian_value == '')
				{					
					this.didian_value = '当地(同城)';
					this.didian = "当地(同城)";
				}
				this.didianState = false;
			},
			
			// 新旧程度显示
			xinjiushow() {
			    this.xinjiuState = true;
			},
			// 新旧程度隐藏
			xinjiuhidden() {
			    this.xinjiuState = false;
			},
			// 选择新旧程度
			xinjiuChange: function (e) {
				const val = e.detail.value;
				this.xinjiu = this.xinjius[val[0]];
			},
			// 新旧程度选择确定
			xinjiuxuanze() {				
				this.xinjiu_value = this.xinjiu;
				if(this.xinjiu_value == '')
				{					
					this.xinjiu_value = '全新';
					this.xinjiu = "全新";
				}
				this.xinjiuState = false;
			},
			
			// 保存转让信息
			savezhuanrang() {
				if(this.zrfangshi_value == '')
				{
					uni.showToast({
					    title: '请选择转让方式',
						icon: 'none',
					    duration: 2000
					});
					return;
				}
				if(this.didian_value == '')
				{
					uni.showToast({
					    title: '请选地点',
						icon: 'none',
					    duration: 2000
					});
					return;
				}
				if(this.xinjiu_value == '')
				{
					uni.showToast({
					    title: '请选择书籍的新旧程度',
						icon: 'none',
					    duration: 2000
					});
					return;
				}
				
				if(this.zrfangshi == "借阅")
				{
					var otype = 'J';
				}
				if(this.zrfangshi  == "交换")
				{
					var otype = 'E';
				}
				if(this.zrfangshi == "出售")
				{
					var otype = 'S';
				}
				if(this.zrfangshi == "赠送")
				{
					var otype = 'Z';
				}
				
				if(this.didian == "当地(同城)")
				{
					var scope = 'L';
				}
				if(this.didian == "当地或异地")
				{
					var scope = 'R';
				}
				
				if(this.xinjiu == "全新")
				{
					var condition = 10;
				}
				if(this.xinjiu == "9成新")
				{
					var condition = 9;
				}
				if(this.xinjiu == "8成新")
				{
					var condition = 8;
				}
				if(this.xinjiu == "7成新")
				{
					var condition = 7;
				}
				if(this.xinjiu == "6成新")
				{
					var condition = 6;
				}
				if(this.xinjiu == "5成新")
				{
					var condition = 5;
				}
				if(this.xinjiu == "较旧")
				{
					var condition = 0;
				}
				
				if(this.jiage.toString() == '')
				{
					uni.showToast({
					    title: '价格不能为空',
						icon: 'none',
					    duration: 2000
					});
					console.log(this.jiage);
					return;
				}
				if(this.jiage < 0)
				{
					uni.showToast({
					    title: '价格不能为负数',
						icon: 'none',
					    duration: 2000
					});
					return;
				}
				
				if(this.shuliang == '')
				{
					uni.showToast({
					    title: '数量不能为空',
						icon: 'none',
					    duration: 2000
					});
					return;
				}
				if(this.shuliang < 1 )
				{
					uni.showToast({
					    title: '数量必须为大于等于1的数字',
						icon: 'none',
					    duration: 2000
					});
					return;
				}
				
				uni.request({
					url: 'https://www.yedushu.cn/api/savezhuanrang', // 保存转让的书籍
					method:'POST',
					data: {
						uid: this.uid,
						bookid: this.bookid,
						bookname: this.bookname,
						zuozhe: this.zuozhe,
						isbn: this.isbn,
						otype: otype, // J借阅，E交换，S出售，Z赠送，B以上均可
						scope: scope, // L当地(同城),R当地或异地
						condition: condition, // 新旧程度， 全新：10，9成新：9，较旧：0
						nowprice: this.jiage, // 售价
						num: this.shuliang, // 出售图书数量
						beizhu: this.beizhu, // 备注
					},
					success: (res) => {
						// console.log(JSON.stringify(res));
						if(res.data.code == 1) {
							// 此书籍已经在出售中了，不需要重新添加
							uni.showToast({
							    title: '此书籍您已经在出售中了,无需重复添加',
								icon: 'none',
							    duration: 2000
							});
							return;							
						}
						if(res.data.code == 2) {
							// 此书籍成功添加到出售中
							// uni.showToast({
							//     title: '此书籍已经在出售中了',
							// 	icon: 'none',
							//     duration: 2000
							// });
							// 返回到上一页面
							// uni.navigateBack({
							//     delta: 1
							// });
							// uni.switchTab({ // 只可以跳转到tab的页面
							//     url: './yuelin',
							// 	success(){
							// 		let page = getCurrentPages().pop(); //跳转页面成功之后
							// 		if (!page) return; 
							// 			page.onLoad(); //如果页面存在，则重新刷新页面
							// 		}
							// });
							uni.navigateTo({
							    url: './usersbags?uid=' + this.uid + '&username=' + this.username
							});
						}						
					}
				});
			}
		}
	}
</script>

<style>
	.content {
		display: flex;
		flex-direction: column;
	}
	.box {		
		padding: 10px 10px;
	}
	.box .item {
		display: flex;
		justify-content: space-between;
		border-bottom: 1px solid #F2F2F2;
		padding: 10px 0;
	}
	.item .title {
		font-size: 15px;
	}
	.item .txt {
		font-size: 14px;
		padding-right: 6px;
	}
	.item .jiage {
		display: flex; 
		flex-direction: row;
		align-items: center;
	}
	.item .shuliang {
		display: flex; 
		flex-direction: row;
		align-items: center;
	}
	.item .input {		
		background-color: #F4F4F4;
		border-radius: 5px;
		width: 100rpx;
		padding: 2px 2px;
		font-size: 14px;
		text-align: center;
	}
	.more {
		width: 6px;
		height: 10px;
	}
	.textarea {
		background-color: #F4F4F4;
		border-radius: 5px;
	}
	.textarea .txt {
		font-size: 14px;
		line-height: 25px;
		background-color: #F2F2F2;
		padding:0 5px;
	}
	.btn {
		background-color: #00cc33;
		color: #FFFFFF;
		margin-top: 15px;
	}
	
	/* 转让方式 */
	.zrfangshi {
		position: fixed;
		top: 0rpx; left: 0rpx; bottom: 0rpx; right: 0rpx;
		background-color: rgba(0, 0, 0, 0.4);
		transition: .3s;
		z-index: 999;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.zrfangshi .share-item {	
		background-color: #FFFFFF;
	}
	.zrfangshi .picker-view {
		width: 600rpx;
		height: 400rpx;
	}
	.zrfangshi .item {
		display: flex;
		align-items: center;
		justify-content: center;
		text-align: center;
	}
	.zrfangshi .footer {
		display: flex;
		padding: 10px 0;
		background-color: #FFFFFF;
		justify-content: flex-end;
	}
	.zrfangshi .footer .txt {
		padding-right: 15px;
		font-size: 15px;
	}
	
	/* 地点 */
	.didian {
		position: fixed;
		top: 0rpx; left: 0rpx; bottom: 0rpx; right: 0rpx;
		background-color: rgba(0, 0, 0, 0.4);
		transition: .3s;
		z-index: 999;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.didian .share-item {	
		background-color: #FFFFFF;
	}
	.didian .picker-view {
		width: 600rpx;
		height: 400rpx;
	}
	.didian .item {
		display: flex;
		align-items: center;
		justify-content: center;
		text-align: center;
	}
	.didian .footer {
		display: flex;
		padding: 10px 0;
		background-color: #FFFFFF;
		justify-content: flex-end;
	}
	.didian .footer .txt {
		padding-right: 15px;
		font-size: 15px;
	}
	
	/* 新旧程度 */
	.xinjiu {
		position: fixed;
		top: 0rpx; left: 0rpx; bottom: 0rpx; right: 0rpx;
		background-color: rgba(0, 0, 0, 0.4);
		transition: .3s;
		z-index: 999;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.xinjiu .share-item {	
		background-color: #FFFFFF;
	}
	.xinjiu .picker-view {
		width: 600rpx;
		height: 400rpx;
	}
	.xinjiu .item {
		display: flex;
		align-items: center;
		justify-content: center;
		text-align: center;
	}
	.xinjiu .footer {
		display: flex;
		padding: 10px 0;
		background-color: #FFFFFF;
		justify-content: flex-end;
	}
	.xinjiu .footer .txt {
		padding-right: 15px;
		font-size: 15px;
	}
</style>
